<!DOCTYPE html>
<html lang="en">
<head>
    <title>stone-serverless-dashboard</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="../static/css/layui.css">

    <style>
        html, body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #main {
            height: 100%;
        }

        #content {
            background-color: #F2F2F2;
            width: 100%;
            position: absolute;
            top: 0px;
            bottom: 50px;
            left: 0px;

        }

        #footer {
            width: 100%;
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="nav">
    </div>
    <div id="content"></div>
    <div style="padding: 20px;" id="componentList">

    </div>
    <div id="footer">

        <div id="installD">
            请选择需要加载的插件路径:<select
                id="loadJarPath">
            <option>
                D:\\work\\stone-serverless\\stone-serverless-component\\stone-serverless-test1\\target\\stone-serverless-test1-component.jar
            </option>
            <option>
                D:\work\stone-serverless\stone-serverless-component\stone-serverless-orm\stone-serverless-orm-mybatis\target\\stone-serverless-orm-mybatis-component.jar
            </option>
            <option>
                D:\\work\\stone-serverless\\stone-serverless-component\\stone-serverless-test2\\stone-serverless-test2-biz\\target\\stone-serverless-test2-biz-component.jar
            </option>
            <option>
                D:\\work\\stone-serverless\\stone-serverless-component\\stone-serverless-dashboard\\target\\stone-serverless-dashboard-component.jar
            </option>
            <option>
                D:\\work\\stone-serverless\\stone-serverless-component\\stone-serverless-registry-center\\stone-serverless-registry-nacos\\target\\stone-serverless-registry-nacos-component.jar
            </option>
            <option>
                D:\\work\\stone-serverless\\stone-serverless-component\\stone-serverless-rpc\\stone-serverless-rpc-okhttp\\target\\stone-serverless-rpc-okhttp-component.jar
            </option>
            <option>
                D:\\work\\stone-serverless\\stone-serverless-component\\stone-serverless-config-center\\stone-serverless-config-nacos\\target\\stone-serverless-config-nacos-component.jar
            </option>
            <option>
                D:\work\stone-serverless\stone-serverless-component\stone-serverless-datasource\stone-serverless-datasource-biz\target\stone-serverless-datasource-biz-component.jar
            </option>
            <option>
                D:\work\stone-serverless\stone-serverless-component\stone-serverless-auth\stone-serverless-auth-satoken\target\stone-serverless-auth-satoken-component.jar
            </option>


        </select>
            <button id="jz">加载</button>
        </div>

    </div>
</div>


</body>
<script type="text/javascript" src="../static/js/layui.js"></script>

<script type="text/javascript" src="../static/js/jquery.min.js"></script>

<script type="text/javascript">
    var basthUrl = "http://127.0.0.1:8888";
    var bsthUrl = basthUrl + "/dashboard/1.0.0";
    layui.use('layer', function () {

    })
    layui.use('dropdown', function () {

    })

    $.ajaxSetup({
        beforeSend: function () {
            //ajax请求之前
            $("body").append(`<div id="loading"  style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 9998"><div style="position: absolute;left: 50%;top: 50%; width: 200px;height: 200px">
    <div data-anim="layui-anim-scaleSpring" class="layui-anim layui-anim-rotate layui-anim-loop">

        <div style="width: 200px;">
            <hr style="background-color: black;height: 1px;border: none;"/>
        </div>
    </div>
</div></div>`);
        },
        complete: function () {
            //ajax请求完成，不管成功失败
            $("body #loading").remove();
        },
        error: function () {
            //ajax请求失败
            $("body #loading").remove();
        }
    })


    $(function () {
        allComponent();
        $("#componentList").on('click', ".uninstall", function (e) {
            var moduleName = $(this).attr("data-name");
            var version = $(this).attr("data-version");
            $.get(bsthUrl + "/uninstall?moduleName=" + moduleName + "&version=" + version, function () {
                layer.msg('卸载成功!');
                allComponent();
            });
        });

        $("#jz").on('click', function (e) {
            var loadJarPath = $("#loadJarPath option:selected").html();
            var s = window.btoa(loadJarPath); // 编码
            $.get(bsthUrl + "/install?jarPath=" + s, function () {
                layer.msg('加载成功!');
                allComponent();
            });
        });

        $("#componentList").on('click', ".apiList", function (e) {
            var moduleName = $(this).attr("data-name");
            var version = $(this).attr("data-version");

            $.get(bsthUrl + "/api_list?componentName=" + moduleName + "&version=" + version, function (res) {
                var bvd = [];
                $(res).each(function (d, e) {
                    bvd.push({
                        title: e
                    });
                });
                var dropdown = layui.dropdown;
                dropdown.render({
                    elem: $(e.target), //可绑定在任意元素中，此处以上述按钮为例,
                    show: true,
                    data: bvd
                    //菜单被点击的事件
                });
            });


        });

        $("#componentList").on('click', ".services", function (e) {
            var moduleName = $(this).attr("data-name");
            var version = $(this).attr("data-version");

            $.get(bsthUrl + "/services?componentName=" + moduleName + "&version=" + version, function (res) {
                var co = `<table class="layui-table">
                              <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                              </colgroup>
                              <thead>
                                <tr>
                                  <th>组件名称</th>
                                  <th>服务路径</th>
                                  <th>版本</th>
                                </tr>
                              </thead>
                            <tbody>`;
                $(res).each(function (d, e) {
                    co += `<tr>
                              <td>${e.componentName}</td>
                              <td>${e.classPath}</td>
                              <td>${e.version}</td>
                            </tr>`;
                });
                co += `</tbody></table>`;
                var dropdown = layui.dropdown;
                dropdown.render({
                    elem: $(e.target), //可绑定在任意元素中，此处以上述按钮为例,
                    show: true,
                    content: co,
                    data: res
                    //菜单被点击的事件
                });
            });
        });

        $("#componentList").on('click', ".indexHtml", function (e) {
            var moduleName = $(this).attr("data-name");
            var version = $(this).attr("data-version");
            window.open(`${basthUrl}/${moduleName}/${version}/templates/index.html`);
        });

    })

    function allComponent() {
        $("#componentList").html("");
        $.get(bsthUrl + "/all", function (res) {

            var obj = $(`<div class="layui-row layui-col-space15" ></div>`);
            var t = null;
            $(res).each(function (d, e) {
                if (d % 4 == 0) {
                    t = obj.clone();
                    $("#componentList").append(t);
                }
                t.append(` <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-col-md10">
              ${e.name}
            </div>
            <div class="layui-col-md2" >
             ${e.version}
            </div>


                </div>
                <div class="layui-card-body">
                    ${e.url}
                </div>
          <div class="layui-row">
            <div class="layui-col-md4">
             &nbsp;
            </div>
               <div class="layui-col-md3" style="margin-top: -10px">
                          <button type="button" data-name="${e.name}" data-version="${e.version}"
                           class="indexHtml layui-btn layui-btn-primary layui-btn-xs layui-btn-radius">index.html</button>
            </div>

               <div class="layui-col-md2" style="margin-top: -10px">
                          <button type="button" data-name="${e.name}" data-version="${e.version}"
                           class="services layui-btn layui-btn-primary layui-btn-xs layui-btn-radius">services</button>
            </div>
             <div class="layui-col-md1" style="margin-top: -10px">
                          <button type="button" data-name="${e.name}" data-version="${e.version}"
                           class="apiList layui-btn layui-btn-primary layui-btn-xs layui-btn-radius">api</button>
            </div>
            <div class="layui-col-md2" style="margin-top: -10px">
                <button type="button" data-name="${e.name}" data-version="${e.version}" class="uninstall layui-btn layui-btn-primary layui-btn-xs layui-btn-radius">卸载</button>
            </div>
          </div>
            </div>
        </div>`)

            })
        });
    }
</script>
</html>